<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>${pageName}</title>

<c:url value="/img/nom.png" var="nom" />
<!-- including the url definitions -->

<%@include file="urls.jsp"%>

<style>


<%@include file ="../../css/jquery-ui-1.10.4.custom.css"%>
 
	/* la structure de toute les pages */ 
	<%@include file ="../../css/style.css"%> 
	<%@include file ="../../css/demo.css"%>
	/*  menu verticale  */
<%@include file="../../css/styles.css"%>
	
	<%@include file="../../css/dhtmlxtoolbar_dhx_web.css"%>
	/*  style du modale */ 
	<%@include file ="../../css/modalWin.css"%>
	/* style de tooltipMenu */ 
	<%@include file ="../../css/component.css"%>
	<%@include file ="../../css/default.css"%> 
	<%@include file="../../css/jquery.toastmessage.css"%>
	
/* 	dropdown button */
<%-- <%@include file ="../../css/dropdownButton/jquery.ui.all.css"%>  --%>
<%-- <%@include file ="../../css/dropdownButton/demos.css"%> --%>
	.ui-menu { position: absolute; width: 100px; }
	
	.inline-link-1 {
	display: inline-block;
	margin: 0 0.2em;
	padding: 3px;
	background: #97CAF2;
	border-radius: 2px;
	transition: all 0.3s ease-out;
	/* Font styles */
	text-decoration: none;
	font-weight: bold;
	color: white;
}

.inline-link-1:hover {
	background: #53A7EA;
}

.inline-link-1:active {
	background: #C4E1F8;
}

.inline-link-1:visited {
	background: #F2BF97;
}

/* breadcrumb */
@font-face {
	font-family: 'Glyphicons Halflings';
	src: url(${f51});
	src: url(${f52}) format('embedded-opentype'), url(${f53}) format('woff'),
		url(${f54}) format('truetype'), url(${f55}) format('svg');
}

.glyphicon {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.glyphicon-circle-arrow-right:before {
	content: "\e131"
}

.glyphicon-chevron-right:before {
	content: "\e080"
}

.glyphicon-user:before {
	content: "\e008"
}
.glyphicon-collapse-down:before {
	content: "\e159"
}

.breadcrumb {
	padding: 8px 15px;
	/* 	margin-bottom: 20px; */
	list-style: none;
 	background-color: #dedede;
/* background: -moz-linear-gradient(#dedede, #eeeeee); */
/* background: -webkit-linear-gradient(#dedede, #eeeeee);  */
	/* 	border-radius: 4px; */
	text-align: left;
}

.breadcrumb>li {
	display: inline-block
}

.breadcrumb>li+li:before {
	content: none;
	/* 	padding: 0 5px; */
	color: #fff;
}

.breadcrumb>.active {
	color: #fff;
}

.glyphicon-circle-arrow-right:before {
	content: "\e131"
}

a {
	color: #999;
}

.inline-link-3 {
	display: inline-block;
	position: relative;
	padding-left: 6px;
	/* Font styles */
	text-decoration: none;
	color: #41636a;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.inline-link-3:hover {
	color: #41636a;
}

.inline-link-3:before {
	content: "\25BA";
	font-size: 80%;
	display: inline-block;
	padding-right: 3px;
	pointer-events: none;
}

.inline-link-3:hover:before {
	color: #F2BF97;
}



#pageNav .menuDivider {
background: #ddd;
font-size: 0;
height: 1px;
/* line-height: 0; */
/* margin: 6px 7px; */
}
</style>


<!--     javascript -->

<script type="text/JavaScript" src="${jQueryURL}"></script>
<script type="text/JavaScript" src="${jQueryUIURL}"></script>
<script type="text/JavaScript" src="${jQTable}"></script>
<script type="text/JavaScript" src="${jSonJTable}"></script>
<script type="text/JavaScript" src="${jmenu}"></script>
<script type="text/JavaScript" src="${leanModal}"></script>
<script type="text/JavaScript" src="${dhtmlxpopup}"></script>
<script type="text/JavaScript" src="${validationEngine}"></script>
<script type="text/JavaScript" src="${validationEngineEng}"></script>
<script type="text/JavaScript" src="${toastmessage}"></script>

<script type="text/JavaScript" src="${dhtmlxcommon}"></script>


<script type="text/JavaScript" src="${modernizr}"></script>
<script type="text/JavaScript" src="${cbpTooltipMenuMin}"></script>

<script type="text/JavaScript" src="${jquery.ui.button}"></script>
<script type="text/JavaScript" src="${jquery.ui.core}"></script>
<script type="text/JavaScript" src="${jquery.ui.widget}"></script>
<script type="text/JavaScript" src="${jquery.ui.position}"></script>
<script type="text/JavaScript" src="${jquery.ui.menu}"></script>

<!-- dropdown Button -->
<script>
	$(function() {
		$( "#rerun" )
			.button()
// 			.click(function() {
// // 				alert( "Running the last action" );
// 			})
			.next()
				.button({
					text: false,
					icons: {
						primary: "ui-icon-triangle-1-s"
					}
				})
				.click(function() {
					var menu = $( this ).parent().next().show().position({
						my: "left top",
						at: "left bottom",
						of: this
					});
					$( document ).one( "click", function() {
						menu.hide();
					});
					return false;
				})
				.parent()
					.buttonset()
					.next()
						.hide()
						.menu();
	});
	</script>
<!--     my accordion function -->

<script type="text/JavaScript">
	$(function() {
		$("#menu").accordion({
			header : "h4"
		});
		// 		$(".ui-accordion .ui-accordion-header").css({ "padding-top":"2px", "padding-bottom":"2px" });
	});
</script>

<script>
	jQuery(function($) {

		// simple jQuery validation script
		$('#login').submit(
				function() {

					var valid = true;
					var errormsg = 'This field is required!';
					var errorcn = 'error';

					$('.' + errorcn, this).remove();

					$('.required', this).each(
							function() {
								var parent = $(this).parent();
								if ($(this).val() == '') {
									var msg = $(this).attr('title');
									msg = (msg != '') ? msg : errormsg;
									$(
											'<span class="'+ errorcn +'">'
													+ msg + '</span>')
											.appendTo(parent).fadeIn('fast')
											.click(function() {
												$(this).remove();
											})
									valid = false;
								}
								;
							});

					return valid;
				});

	});
	
	
	 var myJsonObject;
		if('${jsonString}' != ""){
//			alert("hello equality");
			myJsonObject = jQuery.parseJSON('${jsonString}');
		}

// 	var myJsonObject = ${jsonString};

	$(function() {
		for ( var i = 0; i < myJsonObject; i++) {
			$("#datepicker" + i).datepicker();
		}
	});

</script>
<script>
	$(function() {
		$("#tabs").tabs();
	});
</script>
</head>
<body >
<div class="container">
<div class="codrops-top" style="background: url(${headere})">
	<div class="codrops-demos" style="padding: 0 px;">

				
				
	
	<div class="header" id="header" >
		
<%-- 		<img alt="" src="${headere};" style="float:none;"> --%>
		 <img alt="" src="${nomNew};" style="float:none;margin-left: 40px;">
		  <img alt="" src="${logoAerotechnicMini};" style="float: left; margin-top: 15px;">
		 <div style="float: right;">
		 

<!-- dropdown button -->
<div style="margin-top: 18px;">
	<div>
		<button id="rerun"><span  class="glyphicon glyphicon-user"> </span>
				${userSession.nom}   ${userSession.prenom} 
<%-- 				 &nbsp; ${userSession.profile} --%>
				 </button>
		<button id="select" >Select an action</button>
	</div>
	<ul style="width: 175px;">
		<li><a href="${pageContext.request.contextPath}/deconnexion">Deconnecter</a></li>
<!-- 		<li><a href="#">Save</a></li> -->
              <li cals="menuDivider"></li>
		<li>
		<c:choose>
		<c:when test="${userSession.profile eq '1'}">Administrateur</c:when>
		<c:when test="${userSession.profile eq '2'}">Responsable planning</c:when>
		<c:otherwise>Agent planning</c:otherwise>
		</c:choose>
		</a></li>
	</ul>
</div>


					</div>
				</div>
			</div>
		</div>
<%-- 		<c:choose> --%>
<%-- 			<c:when test="${userSession.profile ne 'Admin'}"> --%>
				<%@include file="../templates/TooltipMenu.jsp"%>
<%-- 			</c:when> --%>

<%-- 		</c:choose> --%>


<!-- 	<nav   class="horizontal-nav full-width horizontalNav-notprocessed"> -->
<!-- 		 <ol style=" padding-bottom: 5px;padding-top: 5px;border-bottom-color:#47a3da ;" class="breadcrumb" > -->
<!--           <li><a  href="#">Home </a><span class="glyphicon glyphicon-chevron-right"></span></li> -->
<!--           <li><a  href="#">Library </a><span class="glyphicon glyphicon-chevron-right"></span></li> -->
<!--           <li class="active">Data </li> -->
<!--     </ol> -->
<!--     </nav> -->
